<template>
	<view>
		<view v-if="isShow">
			<view class="searchBg" :animation="animationData" @click="close"></view>
			<view class="searchBox" :animation="animationData">
				<uni-easyinput focus type="text" v-model="keyword" @input="input" :inputBorder="false" placeholder="请输入关键词查询" />
				<view class="btn" @click="search">
					<uni-icons type="search" size="20" color="#bbb"></uni-icons>
				</view>
			</view>
		</view>

		<view class="searchBtn" @click="show">
			<uni-icons type="search" size="32" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	name: 'keyWord',
	props: {
		words: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			isShow: false,
			keyword: '',
			animationData: {}
		};
	},
	mounted() {
		this.keyword = this.words;
	},
	methods: {
		show() {
			this.isShow = true;
			var animation = wx.createAnimation({
				duration: 300,
				timingFunction: 'ease',
				delay: 0
			});
			this.animation = animation;
			setTimeout(
				function () {
					animation.top(0).step();
					this.animationData = animation.export();
				}.bind(this),
				50
			);
		},
		close() {
			this.isShow = false;
			var animation = wx.createAnimation({
				duration: 300,
				timingFunction: 'ease',
				delay: 0
			});
			this.animation = animation;
			setTimeout(
				function () {
					animation.top('100vh').step();
					this.animationData = animation.export();
				}.bind(this),
				10
			);
		},
		input() {
			this.$emit('onChange', this.keyword);
		},
		search() {
			this.input();
			this.close();
		}
	}
};
</script>

<style lang="scss">
.searchBtn {
	position: fixed;
	z-index: 11;
	right: 15px;
	bottom: 100px;
	width: 110rpx;
	height: 110rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $uni-primary;
	border-radius: 100%;
	border-width: 0;
	box-shadow: 0 1px 8px 1px rgba(165, 165, 165, 0.2);
}
.searchBg {
	position: fixed;
	top: 100vh;
	left: 0;
	z-index: 999998;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
}
.searchBox {
	box-sizing: border-box;
	overflow: hidden;
	position: fixed;
	top: 100vh;
	left: 0;
	z-index: 999999;
	width: 100%;
	padding: 10rpx 20rpx;
	height: 90rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.uni-easyinput {
		height: 70rpx;
		flex: 1;
		font-size: 28rpx;
	}

	.btn {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
